<template>
  <div class="header">
    <div class="select">
      <el-button>年份选择</el-button>
      <el-select v-model="yearv" placeholder="">
        <el-option
          v-for="item in years"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
    <el-input
      placeholder="请输入员工工号"
      prefix-icon="el-icon-search"
      v-model="input2"
      :maxlength="20"
      show-word-limit
    >
    </el-input>
    <el-button type="primary" icon="el-icon-search" @click="chakan()"
      >查看</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      input2: "",
      years: ["all", 2018, 2019, 2020, 2021],
      yearv: "all",
      option: "",
      data:[120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70,]
    };
  },
  methods: {
    chakan() {
      console.log(this.yearv);
      console.log(this.input2);
      if(this.input2 != ''){
        if(this.yearv === 2018) this.data= [100,250,300,180,320,200,120,130,70,50,12,130];
      if(this.yearv === 2019) this.data= [20,30,45,78,100,20,800,300,100,500,200,42];
      if(this.yearv === 2020) this.data= [45,30,45,60,78,50,78,90,20,60,42,32];
      if(this.yearv === 2021) this.data= [100,250,130,70,50,12,130];
        this.option = {
          xAxis: {
            type: "category",
            data: [ "一月","二月", "三月", "四月","五月","六月","七月","八月","九月","十月","十一月","十二月",],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: this.data,
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: "rgba(180, 180, 180, 0.2)",
              },
            },
          ],
        };
        console.log(222222,this.option)
        this.$emit("option", this.option);
      }
      if(this.input2 == ''){
        if(this.yearv === "all"){
          this.getdataall()
        }
        if(this.yearv === 2018){
          this.getdata1()
        }
        if(this.yearv === 2019){
          this.getdata2()
        }
        if(this.yearv === 2020){
          this.getdata3()
        }
        if(this.yearv === 2021){
          this.getdata4()
        }
      }
    },
    getdataall(){
     this.option = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 400, name: "李红 销售量 "+400 },
              { value: 380, name: "王红 销售量 "+380 },
              { value: 320, name: "张红 销售量 "+320 },
              { value: 300, name: "张三 销售量 "+300  },
              { value: 280, name: "李四 销售量 "+280  },
              { value: 260, name: "李明 销售量 "+260 },
              { value: 220, name: "cz 销售量 "+220  },
              { value: 180, name: "tom 销售量 "+180  },
            ],
          },
        ],
      };
      console.log(333333333,this.option)
      this.$emit("option", this.option);
    },
    getdata1(){
         this.option = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: "李红 销售量 "+40 },
              { value: 80, name: "王红 销售量 "+80 },
              { value: 20, name: "张红 销售量 "+20 },
              { value: 30, name: "张三 销售量 "+30 },
              { value: 20, name: "李四 销售量 "+20 },
              { value: 26, name: "李明 销售量 "+26 },
              { value: 22, name: "cz 销售量 "+22 },
              { value: 18, name: "tom 销售量 "+18 },
            ],
          },
        ],
      };
      this.$emit("option", this.option);
    },
    getdata2(){
       this.option = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 120, name: "李红" },
              { value: 50, name: "王红" },
              { value: 88, name: "张红" },
              { value: 66, name: "张三" },
              { value: 44, name: "李四" },
              { value: 26, name: "李明" },
              { value: 22, name: "cz" },
              { value: 18, name: "tom" },
            ],
          },
        ],
      };
      this.$emit("option", this.option);
    },
    getdata3(){
      this.option = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 20, name: "李红 销售量 "+20},
              { value: 150, name: "王红 销售量 "+150 },
              { value: 188, name: "张红 销售量 "+188 },
              { value: 166, name: "张三 销售量 "+166 },
              { value: 144, name: "李四 销售量 "+144 },
              { value: 126, name: "李明 销售量 "+126 },
              { value: 122, name: "cz 销售量 "+122 },
              { value: 118, name: "tom 销售量 "+118 },
            ],
          },
        ],
      };
      this.$emit("option", this.option);
    },
     getdata4(){
      this.option = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 12, name: "李红 销售量 "+12 },
              { value: 59, name: "王红 销售量 "+59 },
              { value: 8, name: "张红 销售量 "+8 },
              { value: 96, name: "张三 销售量 "+96 },
              { value: 14, name: "李四 销售量 "+14 },
              { value: 56, name: "李明 销售量 "+56 },
              { value: 72, name: "cz 销售量 "+72 },
              { value: 98, name: "tom 销售量 "+98 },
            ],
          },
        ],
      };
      this.$emit("option", this.option);
    }
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-around;
  width: 1000px;
}
.select {
  display: flex;
  flex-wrap: nowrap;
  width: 180px;
}
.select2 {
  display: flex;
  flex-wrap: nowrap;
  width: 160px;
}
.el-input {
  width: 36%;
}
</style>